<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-card shadow="hover" class="mgb20" style="height:100%;">
					<el-row :gutter="20" class="mgb20">
						<el-col :span="8">
							<el-card shadow="hover" :body-style="{ padding: '0px' }">
								<div class="grid-content grid-con-2">
									<i class="el-icon-s-finance grid-con-icon"></i>
									<div class="grid-cont-right">
										<div class="grid-num">{{ detail.balance }}</div>
										<div>账户资产</div>
									</div>
								</div>
							</el-card>
						</el-col>
						<el-col :span="8">
							<el-card shadow="hover" :body-style="{ padding: '0px' }">
								<div class="grid-content grid-con-1">
									<i class="el-icon-lx-people grid-con-icon"></i>
									<div class="grid-cont-right">
										<div class="grid-num">{{ detail.dailypl }}</div>
										<div>日盈亏</div>
									</div>
								</div>
							</el-card>
						</el-col>
						<el-col :span="8">
							<el-card shadow="hover" :body-style="{ padding: '0px' }">
								<div class="grid-content grid-con-3">
									<i class="el-icon-lx-goods grid-con-icon"></i>
									<div class="grid-cont-right">
										<div class="grid-num">{{ detail.unrealizedpl }}</div>
										<div>未实现盈亏</div>
									</div>
								</div>
							</el-card>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card shadow="hover">
					<div id="myChart" :style="{ width: '100%', height: '300px' }"></div>
					<!-- <schart ref="bar" class="schart" canvasId="bar" :options="options"></schart> -->
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="hover"><div id="myChart2" :style="{ width: '100%', height: '300px' }"></div></el-card>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-card shadow="hover">
					<div slot="header" class="clearfix"><span>消息通知</span></div>
					<el-table :data="msgList" style="width:100%;">
						<el-table-column label="时间" prop="create_at"></el-table-column>
						<el-table-column label="内容" prop="subject"></el-table-column>
						<el-table-column label="发送人" prop="sender_name"></el-table-column>
						<!-- <el-table-column label="操作" align="center">
							<template #default="scope">
								<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.row.id)">删除</el-button>
							</template>
						</el-table-column> -->
					</el-table>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { IndexAPI, graphEchartAPI, trendEchartAPI, getMsgAPI, delMsgAPI } from '@/api/index';
import Schart from 'vue-schart';
import bus from '@/components/common/bus';
export default {
	name: 'dashboard',
	data() {
		return {
			name: sessionStorage.getItem('realName'),
			userType: sessionStorage.getItem('userType'),
			nowDate: '',
			detail: {},
			msgList: []
		};
	},
	components: {
		Schart
	},
	mounted() {
		this.getIndex();
		this.drawLine();
		this.drawLine2();
		this.getMsgList();
		this.intertime = setInterval(() => {
			// this.getDate();
		}, 5000);
	},
	beforeDestroy() {
		if (this.formatDate) {
			clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
		}
	},
	methods: {
		getMsgList() {
			getMsgAPI().then(res => {
				if (res.status == 200) {
					// console.log(res.data)
					this.msgList = res.data;
				} else {
					this.$message.error(res.msg);
					return false;
				}
			});
		},
		getIndex() {
			var parems = {
				accountId: window.sessionStorage.getItem('AccountId')
			};
			IndexAPI(parems).then(res => {
				if (res.status == 200) {
					// console.log(res.data)
					this.detail = res.data;
				} else {
					this.$message.error(res.msg);
					return false;
				}
			});
		},
		// 图表
		drawLine() {
			// 基于准备好的dom，初始化echarts实例
			var myChart = this.$echarts.init(document.getElementById('myChart'));
			// 绘制图表
			var parems = {
				accountId: window.sessionStorage.getItem('AccountId')
			};
			graphEchartAPI(parems).then(res => {
				if (res.status == 200) {
					// console.log(res)
					var option = {
						title: {
							text: '当前持仓展示图'
						},
						legend: {
							data: ['当前持仓展示图']
						},
						toolbox: {
							feature: {
								magicType: {
									type: ['stack']
								},
								dataView: {},
								saveAsImage: {
					 			pixelRatio: 2
								}
							}
						},
						tooltip: {},
						xAxis: {
							data: res.data.buy_symbol,
							splitLine: {
								show: false
							}
						},
						yAxis: {},
					 series: [
							{
					 		name: '持仓统计',
								type: 'bar',
								data: res.data.buy_total,
								emphasis: {
									focus: 'series'
								},
								animationDelay: function(idx) {
					    return idx * 10;
								}
							}
						],
						animationEasing: 'elasticOut',
						animationDelayUpdate: function(idx) {
							return idx * 5;
						}
					};
					myChart.setOption(option);
					window.onresize = myChart.resize;
				} else {
					this.$message.error(res.msg);
					return false;
				}
			});
		},
		drawLine2() {
			// 基于准备好的dom，初始化echarts实例
			let myChart = this.$echarts.init(document.getElementById('myChart2'));
			// 绘制图表
			var parems = {
				accountId: window.sessionStorage.getItem('AccountId')
			};
			trendEchartAPI(parems).then(res => {
				if (res.status == 200) {
					var option = {
						title: {
							text: '账户累计收益趋势图'
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								label: {
									backgroundColor: '#6a7985'
								}
							}
						},
						dataZoom: {
							show: false,
							start: 50,
							end: 100
						},
						toolbox: {
							feature: {
								magicType: {
									type: ['stack']
								},
								dataView: {},
								saveAsImage: {
								pixelRatio: 2
								}
							}
						},
						xAxis: [
							{
								type: 'category',
								boundaryGap: false,
								data: res.data.buy_time
							}
						],
						yAxis: [
							{
								type: 'value'
							}
						],
						series: [
							{
								name: '账户累计收益',
								type: 'line',
								stack: 'Total',
								smooth: true,
								lineStyle: {
									width: 0
								},
								showSymbol: false,
								areaStyle: {
									opacity: 0.8,
									color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{
											offset: 0,
											color: 'rgb(0, 221, 255)'
										},
										{
											offset: 1,
											color: 'rgb(77, 119, 255)'
										}
									])
								},
								emphasis: {
									focus: 'series'
								},
								data: res.data.buy_total
							}
						]
					};
					myChart.setOption(option);
					window.onresize = function () {
					      myChart.resize()
					}
				} else {
					this.$message.error(res.msg);
					return false;
				}
			});
		},
		// 模型删除
		handleDelete(data) {
			this.$confirm('确定要删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					var parems = { msgId: data };
					delMsgAPI(parems).then(res => {
						if (res.status == 200) {
							this.$message.success('删除成功');
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					});
				})
				.catch(() => {});
		}
	}
};
</script>

<style scoped>
.el-row {
	margin-bottom: 20px;
}

.grid-content {
	display: flex;
	align-items: center;
	height: 100px;
}

.grid-cont-right {
	flex: 1;
	text-align: center;
	font-size: 14px;
	color: #999;
}

.grid-num {
	font-size: 30px;
	font-weight: bold;
}

.grid-con-icon {
	font-size: 50px;
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	color: #fff;
}

.grid-con-1 .grid-con-icon {
	background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
	color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
	background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
	color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
	background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
	color: rgb(242, 94, 67);
}

.user-info {
	display: flex;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 2px solid #ccc;
	margin-bottom: 20px;
}

.user-avator {
	width: 120px;
	height: 120px;
	border-radius: 50%;
}

.user-info-cont {
	padding-left: 50px;
	flex: 1;
	font-size: 14px;
	color: #999;
}

.user-info-cont div:first-child {
	font-size: 30px;
	color: #222;
}

.user-info-list {
	font-size: 14px;
	color: #999;
	line-height: 25px;
}

.user-info-list span {
	margin-left: 70px;
}

.mgb20 {
	margin-bottom: 20px;
}

.todo-item {
	font-size: 14px;
}

.todo-item-del {
	text-decoration: line-through;
	color: #999;
}

.schart {
	width: 100%;
	height: 300px;
}
</style>
